.grid-wrap {
  /* 声明 display: grid; 或者 display: inline-grid 创建 grid 布局 */
  display: grid;
}

/* 示例1 */
.grid-box-1 {
  border: 1px solid #999;
  width: 300px;
  height: 200px;
  margin: 20px;
  box-sizing: border-box;
  /* 指定列数 3 */
  grid-template-columns: 1fr 1fr 1fr;
  /* 指定行数 2 */
  grid-template-rows: 1fr 1fr;
}
.grid-box-1 > div {
  box-sizing: border-box;
  background-color: bisque;
  border-radius: 4px;
  border: 1px solid #ccc;
}

/* 示例2 */
.grid-box-2 {
  border: 1px solid #999;
  width: 300px;
  height: 200px;
  margin: 20px;
  box-sizing: border-box;
  /* 指定列数 3 */
  grid-template-columns: 1fr 1fr 1fr;
  /* 指定行数 2 */
  grid-template-rows: 1fr 1fr;
  /* 设置隐试网格行高 */
  grid-auto-rows: 40px;
  /* grid-auto-columns 隐试网格列宽 */
}
.grid-box-2 > div {
  background-color: bisque;
  border-radius: 4px;
  border: 1px solid #ccc;
}

/* 示例3 */
.grid-box-3 {
  border: 1px solid #999;
  width: 300px;
  height: 200px;
  margin: 20px;
  box-sizing: border-box;
  /* 行列数的 repate 简写 */
  grid-template-columns: repeat(3, [main-start] 1fr [main-end]);
  grid-template-rows: repeat(2, [main-start] 1fr [main-end]);
}
.grid-box-3 > div {
  background-color: bisque;
  border-radius: 4px;
  border: 1px solid #ccc;
}
/*
  通过 grid-column-start，grid-column-end，grid-row-start，grid-row-end或者grid-column和grid-row，或者通过grid-area 设置元素占据的网格轨道
*/
.grid-box-3 > div:nth-of-type(1) {
  /* 2 行 3 列 占一行 */
  grid-column-start: 1;
  grid-column-end: 4;
}
.grid-box-3 > div:nth-of-type(2) {
  grid-row: 2 / 4;
}
.grid-box-3 > div:nth-of-type(3) {
  /* span 表示占据几行（几列），下面等价于 2 / 4 */
  grid-column: 2 / span 2; 
}
.grid-box-3 > div:nth-of-type(6) {
  grid-column: 1 / span 3;
}

/* 示例4 */
/* grid-column-gap，grid-row-gap或者grid-gap设置网格间距 */
.grid-gap {
  grid-column-gap: 2px;
  grid-row-gap: 6px;
}
.grid-gap > div:nth-of-type(2) {
  grid-row: 2 / 4;
}

/* 示例4 自动子元素填充 */
.grid-box-4 {
  margin: 20px;
  margin-right: 100rpx;
  box-sizing: border-box;
  border: 1px solid #999;
  /* 自适应列数：auto-fill，子元素宽度自适应 */
  /*
    minmax 函数是 grid 布局中一个十分实用的功能，下面代码中的含义是：
    每个列的宽度最小是150像素，最大是1fr
  */
  grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
}
.grid-box-4 > div {
  height: 50px;
  background-color: bisque;
  border-radius: 4px;
  border: 1px solid #ccc;
  box-sizing: border-box;
}

/* 示例6 */
.grid-box-6 {
  border: 1px solid #999;
  width: 400px;
  height: 120px;
  margin: 20px;
  grid-template-columns: repeat(9, 1fr);
  /* 指定区域名称 */
  grid-template-areas:
    "hd hd hd hd hd hd hd hd hd"
    "sd sd sd main main main main . ."
    "sd sd sd ft ft ft ft ft ft";
}
.grid-box-6 > div {
  background-color: bisque;
  border-radius: 4px;
  border: 1px solid #ccc;
}
/* 通过 grid-area 区域别名设置单元格占据范围 */
.grid-box-6 > div:nth-of-type(1) {
  /* 1 占据所有别名为 hd 的网格 */
  grid-area: hd;
}
.grid-box-6 > div:nth-of-type(2) {
  grid-area: ft;
}
.grid-box-6 > div:nth-of-type(3) {
  grid-area: main;
}
.grid-box-6 > div:nth-of-type(4) {
  grid-area: sd;
}

/* 示例7 */
.grid-box-7 {
  border: 1px solid #999;
  width: 200px;
  margin: 20px;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 50px;
  /* 布局算法 */
  grid-auto-flow: row dense;
}
.grid-box-7 > div {
  background-color: bisque;
  border-radius: 4px;
  border: 1px solid #ccc;
}
.grid-box-7 > div:nth-of-type(1){
  grid-column-end: span 3;
}
.grid-box-7 > div:nth-of-type(2n){
  grid-column-end: span 2;
  grid-row-end: span 2;
}

/* 示例8 */
.grid-box-align {
  width: 300px;
  border: 1px solid #999;
  margin: 20px;
  grid-template-columns: repeat(3, 1fr);
}
.grid-box-align > div {
  background-color: bisque;
  border-radius: 4px;
  border: 1px solid #ccc;
}
/* justify-items */
.grid-box-justify-items {
  grid-auto-rows: 50px;
}
.grid-box-justify-items > div {
  display: inline;
}
.grid-box-justify-items-start {
  justify-items: start;
}
.grid-box-justify-items-center {
  justify-items: center;
}
.grid-box-justify-items-end {
  justify-items: end;
}
.grid-box-justify-items-stretch {
  justify-items: stretch;
}
/* align-items */
.grid-box-align-items {
  grid-auto-rows: 50px;
}
.grid-box-align-items > div {
  height: 25px;
}
.grid-box-align-items-start {
  align-items: start;
}
.grid-box-align-items-center {
  align-items: center;
}
.grid-box-align-items-end {
  align-items: end;
}
.grid-box-align-items-stretch {
  align-items: stretch;
}
.grid-box-align-items-stretch > div {
  height: auto;
}
.grid-box-align-items-baseline {
  align-items: baseline;
}
.grid-box-align-items-baseline > div:nth-of-type(2) {
  height: auto;
  font-size: 22px;
  padding-bottom: 10px;
}
/* justify-content */
.grid-box-justify-content {
  grid-auto-rows: 50px;
  grid-template-columns: repeat(auto-fill, 80px);
}
.grid-box-justify-content-start {
  justify-content: start;
}
.grid-box-justify-content-center {
  justify-content: center;
}
.grid-box-justify-content-end {
  justify-content: end;
}
.grid-box-justify-content-stretch {
  justify-content: stretch;
}
.grid-box-justify-content-space-around {
  justify-content: space-around;
}
.grid-box-justify-content-space-between {
  justify-content: space-between;
}
.grid-box-justify-content-space-evenly {
  justify-content: space-evenly;
}
/* align-content */
.grid-box-align-content {
  height: 150px;
  grid-auto-rows: 50px;
}
.grid-box-align-conent-start {
  align-content: start;
}
.grid-box-align-conent-center {
  align-content: center;
}
.grid-box-align-conent-end {
  align-content: end;
}
.grid-box-align-conent-stretch {
  align-content: stretch;
}
.grid-box-align-conent-space-around {
  align-content: space-around;
}
.grid-box-align-conent-space-between {
  align-content: space-between;
}
.grid-box-align-conent-space-evenly {
  align-content: space-evenly;
}
